/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="content" >
		
		<swiper v-if="bannerList.length>0" :indicator-dots="indicatorDots" indicator-active-color="#ffffff" indicator-color="rgba(235,237,240,.3)" :autoplay="autoplay" :circular='circular' :interval="interval" :duration="duration" class="swiper_box">
			<block v-for="(item,index) in bannerList">
				<swiper-item>
					
					<navigator :url="item.ad_link">
						<image :src="hostUrl+item.ad_code" ></image>
					</navigator>
				</swiper-item>
			</block>
			
		</swiper>
	</view>
</template>

<script>
	import {getBanner} from "../../api/api.js";
	import config from "../../api/config.js";
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				circular: true,
				interval: 10000,
				duration: 500,
				bannerList:"",//轮播图列表
				hostUrl:config.host,//图片路径前缀
			};
		},
		created(){
			this._getBanner();
		},
		methods:{
			_getBanner(){
				getBanner().then(res=>{
					console.log(res)
					
					this.bannerList=res.records
				})
			}
		}
	}
</script>
<style lang="scss">
	.content{
		background: $index-bg-color;
		height: 340rpx;
		margin-top: 93rpx;
		.swiper_box{
			width: 100%;
			height: 340rpx;
			overflow: hidden;
			
			text-align: center;
			border-radius: 10rpx;
			image{
				width: 710rpx;
				border-radius: 10rpx;
				height: 340rpx;
				display: inline-block;
				overflow: hidden;

			}
			navigator{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			
		}
		
	}
	
</style>